<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		
		<script src="js/highcharts.js"></script>
		<!--圆环-->
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="../../libs/js/graphical/progress.js" type="text/javascript"></script>
		<!--图片滚动可控start-->
		<script type="text/javascript" src="../../libs/js/pic/switchable.js"></script>
		<script type="text/javascript" src="../../libs/js/pic/switchable.effect.js"></script>
		<!--图片滚动可控end-->
		
		
		<link rel="stylesheet" type="text/css" href="style/style.css"/>
		<style type="text/css">
			
			body{
				background: transparent;
			}
			
			
			#holder {
                position: relative;
                width: 250px;
                height: 300px;
                float: left;
            }
            #holder span{
            	display: block;
            	width: 145px;
            	/*height: 145px;*/
            	font-size: 30px;
            	font-weight: bold;
            	color: #292929;
            	text-align: center;
            	position: absolute;
            	top: 40%;
            	left: 20%;
            	/*border: 1px solid red;*/
            }
            #holder span p{
            	display: block;
            	width: 100%;
            	color: #1691DE;
            	font-size: 12px;
            	text-align: center;
            	line-height: 40px;
            	font-weight: normal;
            }
            .trigger-bar .prev, .trigger-bar .next{
            	width: 20px;
            	height: 20px;
            	margin-top: 5px;
            }
            .trigger-bar .next{
            	margin-right: 15px;
            }
            .scrollable-trigger{
            	margin: 5px 10px 0 0;
            }
            .scrollable-panel{
            	width: 100%;
            	height: 300px;
            }
            .scrollable-panel div{
            	/*width: 100%;*/
            }
            .scrollable-panel>div{
            	position: absolute;
            	width: 2010em;;
            }
            
		</style>
	</head>

	<body>
		<div class="Content_win">
			<div class="title">
				<span class="title">我的工作台</span>
			</div>
			
			<div class="icon_nav">
				<ul>
					<li>
						<img src="style/icon01.png" alt="" />
						<span>订单处理</span>
					</li>
					<li style="background: #4DC726;">
						<img src="style/icon02.png" alt="" />
						<span>物料耗材</span>
					</li>
					<li style="background: #3DA1D2;">
						<img src="style/icon03.png" alt="" />
						<span>生产管理</span>
					</li>
					<li style="background: #759DD8;">
						<img src="style/icon04.png" alt="" />
						<span>设备工艺</span>
					</li>
					<li style="background: #9A81D2;margin: 0;">
						<img src="style/icon05.png" alt="" />
						<span>综合管理</span>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
			<!--线体状态-->
			<div class="line_state">
				<div id="container" style="min-width: 310px; height: 400px; margin: 20px auto 0 auto"></div>
				
			</div>
			<!--保养-->
			<div class="upkeep_state">
				<div class="left">
					<div class="title">
						<span>线体保养状态</span>
						<div style="float: right;margin-right: 20px;">
							<select selWidth="100">
								<option value="">1月份</option>
								<option value="0">2月份</option>
								<option value="1">3月份</option>
								<option value="2">4月份</option>
							</select>
						</div>
						<div class="clear"></div>
					</div>
					<div id="holder">
						<span>L1<p>保养不错，继续努力</p></span>
					</div>
					<div class="text">
						<p><i></i>有60%的配件正常</p>
						<p><i style="background: url(style/upkeep02.png) no-repeat center center;"></i>有40%的配件异常</p>
					</div>
					<div class="clear"></div>
				</div>
				<div class="right">
					<div class="title trigger-bar">
						<span>近期保养计划</span>
						<div style="margin-top: 5px;">
							<a href="javascript:void(0);" title="下翻" id="next4" class="next"></a>
							<a href="javascript:void(0);" title="上翻" id="prev4" class="prev"></a>
							<div id="trigger4" class="scrollable-trigger"></div>
							<div class="clear"></div>
						</div>
					</div>
					<div id="panel4" class="scrollable-panel" style="">
						<div class="clearfix">
							<div class="text_content">
								<ul>
									<li>
										<div class="tip">
											<span>周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
									<li>
										<div class="tip">
											<span style="background: #59B6E2;">周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
									<li>
										<div class="tip">
											<span style="background: #59B6E2;">周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
							<div class="text_content">
								<ul>
									<li>
										<div class="tip">
											<span>周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
									<li>
										<div class="tip">
											<span style="background: #59B6E2;">周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
									<li>
										<div class="tip">
											<span style="background: #59B6E2;">周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
							<div class="text_content">
								<ul>
									<li>
										<div class="tip">
											<span>周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
									<li>
										<div class="tip">
											<span style="background: #59B6E2;">周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
									<li>
										<div class="tip">
											<span style="background: #59B6E2;">周保养</span>
											<p>11:25AM</p>
										</div>
										<div class="details">
											设计人员需要了解BGA的性能特性，这与早期的SMD很相似。PCB设计者必须知道在制造工艺发生变化时，应如何对设计进行相应的修改...
										</div>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					
					
				</div>
			</div>
			
			<div class="clear"></div>
		</div>
		
	<script type="text/javascript">
		function showToast1(text){
			top.Toast('showNoticeToast',text );
		}
		var radius = 80;
	    var paramBg = {stroke: "#F66C48", "stroke-width": 8};
	    var paramBlue = {stroke: "#6DB4E8", "stroke-width": 9,"stroke-linecap":""};
		$(function () {
			var paper =initPaper("holder", 250, 300);
	        //paper,current,min,max,cx,cy,radius,param,paramBg
	        drawRingProgress(paper,23,0,30,125,150,radius,paramBlue,paramBg);
		        
			$('#container').highcharts({
				colors: ['#6EB4E5','#F86B4F'],
	            chart: {
	                type: 'area',
	                backgroundColor: 'transparent'
	            },
	            title: {
	                text: '线体状态',
	                style:{
	                	color:'#262A2D',
	                	fontSize:'18px'
	                }
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'left',
	                verticalAlign: 'top',
	                x: 150,
	                y: 100,
	                floating: true,
	                borderWidth: 1,
	                backgroundColor: '#fff'
	            },
	            xAxis: {
	                categories: [
	                    'L1 性能监控',
	                    'L2 性能监控',
	                    'L3 性能监控',
	                    'L4 性能监控',
	                    'L5 性能监控',
	                    'L6 性能监控',
	                    'L7 性能监控'
	                ],
	                tickWidth:0,        //设置刻度标签宽度  
                    lineColor:'#ffffff',//设置坐标颜色  
                    lineWidth:0,        //设置坐标宽度  
                    labels:{  
                       enabled:true  
                    }
	            },
	            yAxis: {
	                title: {
	                    text: ' '
	                },
	                gridLineWidth: 1
	                
	            },
	            tooltip: {
	                shared: true,
	                valueSuffix: ' 个'
	            },
	            credits: {
	                enabled: false
	            },
	            plotOptions: {
	                area: {
	                    fillOpacity: 1
	                }
	            },
	            series: [{
	                name: '北京',
	                data: [3, 4, 3, 5, 4, 10, 12]
	            }, {
	                name: '上海',
	                data: [3,4]
	            }]
	        });
			
			//自定义显示个数
			$("#trigger4").switchable("#panel4 > div > div", {
				triggerType: "click",
				effect: "scroll",
				steps: 1,
				visible: 1
			}).carousel();
			var api4 = $("#trigger4").switchable();
			$("#next4").click(function(){
				api4.next();
			});
			$("#prev4").click(function(){
				api4.prev();
			});
			
			
			
        });
	</script>
	</body>

</html>